<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>多快好省，购物上京东！</title>
    <link rel="shortcut icon" href="./img/JD_icon.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/fonts.css" />
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/JD.css"> 
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
</head>

<body>
    <div id="app">
        <!-- 搜索栏 注意使用自适应三栏布局 -->
        <div class="search-wrap">
            <div class="search-btn"></div>
            <div class="search">
                <div class="jd-icon"></div>
                <div class="sou"></div>
            </div>
            <div class="search-login">登录</div>
        </div>

        <!-- 主体内容部分 -->
        <div class="main-content">
            <!-- 滑动图 -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img src="./img/banner1.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner2.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner3.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner4.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner5.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner6.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner7.jpg" alt=""></div>
                    <div class="swiper-slide"><img src="./img/banner8.jpg" alt=""></div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>

            <!-- 宣传栏 -->
            <div class="brand">
                <div>
                    <a href="#">
                        <img src="./img/banner_l.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="./img/banner_C.png" alt="">
                    </a>
                </div>
                <div>
                    <a href="#">
                        <img src="./img/banner_R.png" alt="">
                    </a>
                </div>
            </div>

            <!--导航-->
            <div class="jd_nav">
                <ul class="clearfix">
                    <li>
                        <img src="./img/nav1.png" alt="">
                        <p>京东超市</p>
                    </li>
                    <li>
                        <img src="./img/nav2.png" alt="">
                        <p>全球购</p>
                    </li>
                    <li>
                        <img src="./img/nav3.png" alt="">
                        <p>服装城</p>
                    </li>
                    <li>
                        <img src="./img/nav4.png" alt="">
                        <p>京东生鲜</p>
                    </li>
                    <li>
                        <img src="./img/nav5.png" alt="">
                        <p>京东到家</p>
                    </li>
                    <li>
                        <img src="./img/nav6.png" alt="">
                        <p>充值中心</p>
                    </li>
                    <li>
                        <img src="./img/nav7.png" alt="">
                        <p>惠赚钱</p>
                    </li>
                    <li>
                        <img src="./img/nav8.png" alt="">
                        <p>领券</p>
                    </li>
                    <li>
                        <img src="./img/nav9.png" alt="">
                        <p>我的分类</p>
                    </li>
                    <li>
                        <img src="./img/nav10.png" alt="">
                        <p>购物</p>
                    </li>
                </ul>
            </div>

            <!-- 商品区 -->
            <div class="hot_goods">
                <section class="hot_goods_box">
                    <div class="hot_goods_main_content">
                        <div class="hot_goods_title no_border">
                            <h3>京东秒杀</h3>
                            <div class="goods_leave_time">
                                <span>剩余</span>
                                <span class="goods_leave_time_num">19</span>
                                <span>:</span>
                                <span class="goods_leave_time_num">11</span>
                                <span>:</span>
                                <span class="goods_leave_time_num">11</span>
                            </div>
                            <p><a href="">更多秒杀&gt;</a></p>
                        </div>
                        <div class="hot_goods_content">
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/sk01.png" alt="">
                                    <p>&yen;189</p>
                                    <p>&yen;265</p>
                                </a>
                            </div>
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/sk02.png" alt="">
                                    <p>&yen;99</p>
                                    <p>&yen;145</p>
                                </a>
                            </div>
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/sk03.png" alt="">
                                    <p>&yen;3399</p>
                                    <p>&yen;2790</p>
                                </a>
                            </div>
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/sk04.png" alt="">
                                    <p>&yen;226</p>
                                    <p>&yen;369</p>
                                </a>
                            </div>
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/hot_goods_w50_03.png" alt="">
                                    <p>&yen;100</p>
                                    <p>&yen;69</p>
                                </a>
                            </div>
                            <div class="hot_goods_content_box">
                                <a href="">
                                    <img src="./img/hot_goods_w25_04.png" alt="">
                                    <p>&yen;250</p>
                                    <p>&yen;169</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <!-- 逛商场 -->
            <section class="hot_goods_box">
                <!-- <div class="hot_goods_box_header">
                <img src="./img/hot_goods_header.jpg" alt="">
            </div> -->
                <div class="hot_goods_main_content">
                    <!-- 商品内容区 -->
                    <div class="hot_goods_content">
                        <!-- 占屏幕 50% 宽 -->
                        <div class="hot_goods_w50">
                            <!-- 绝对定位左上角 -->
                            <div class="hot_goods_w50_left">
                                <p>完美纪念</p>
                                <p>过生日要有仪式感</p>
                            </div>
                            <!-- 绝对定位右下角 -->
                            <div class="hot_goods_w50_right">
                                <img src="./img/C2.jpg" alt="">
                                <img src="./img/C5.webp" alt="">
                            </div>
                        </div>
                        <div class="hot_goods_w50">
                            <!-- 绝对定位左上角 -->
                            <div class="hot_goods_w50_left">
                                <p>无畏时光</p>
                                <p>明星时尚</p>
                            </div>
                            <!-- 绝对定位右下角 -->
                            <div class="hot_goods_w50_right">
                                <img src="./img/C1.jpg" alt="">
                                <img src="./img/C6.jpg" alt="">
                            </div>
                        </div>
                        <div class="hot_goods_w50">
                            <!-- 绝对定位左上角 -->
                            <div class="hot_goods_w50_left">
                                <p>程序猿</p>
                                <p>装备必须牛</p>
                            </div>
                            <!-- 绝对定位右下角 -->
                            <div class="hot_goods_w50_right">
                                <img src="./img/C3.jpg" alt="">
                                <img src="./img/C8.webp" alt="">
                            </div>
                        </div>
                        <div class="hot_goods_w50">
                            <!-- 绝对定位左上角 -->
                            <div class="hot_goods_w50_left">
                                <p>衬衫专场</p>
                                <p>商务新品</p>
                            </div>
                            <!-- 绝对定位右下角 -->
                            <div class="hot_goods_w50_right">
                                <img src="./img/C4.jpg" alt="">
                                <img src="./img/C7.webp" alt="">
                            </div>
                        </div>

                    </div>
                </div>
            </section>

            <!--为你推荐-->
            <div class="jd_intro">
                <div class="intro_con">
                    <ul class="clearfix">
                        <li>
                            <a href="">
                                <img src="img/B1.webp" alt="">
                                <p>绿女士性感内裤</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B2.webp" alt="">
                                <p>婴儿手推车可收纳观光</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B3.webp" alt="">
                                <p>广场舞音响 网络直播户外</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B6.webp" alt="">
                                <p>户外移动拉杆户外音响</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B7.webp" alt="">
                                <p>雨天晴天太阳伞</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B8.webp" alt="">
                                <p>男士潮流运动裤</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B9.webp" alt="">
                                <p>送礼按摩仪</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B10.webp" alt="">
                                <p>天线收听收音机老人</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B11.webp" alt="">
                                <p>移动CD机家用</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B12.webp" alt="">
                                <p>厨房用品压蒜</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B13.webp" alt="">
                                <p>女士斜挎包韩版</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B14.webp" alt="">
                                <p>纯金24K送长辈送礼物</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B15.webp" alt="">
                                <p>玻璃保温杯中年必备</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B1.webp" alt="">
                                <p>家用内饰玄关摆饰</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B18.webp" alt="">
                                <p>狗皮膏药万源通筋骨贴</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="img/B19.webp" alt="">
                                <p>通灵珠宝珍藏百年</p>
                                <div>
                                    <span class="pull_left">&yen;<strong>128</strong>.00</span>
                                    <a class="pull_right" href="">看相似</a>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>

        <!--尾部-->
        <!-- <div class="jd_footer">
            <ul class="clearfix">
                <li><a href="" class="item active"><img src="./img/a-home.png" alt=""></a></li>
                <li><a href="" class="item"><img src="./img/n-cart.png" alt=""></a></li>
                <li><a href="" class="item"><img src="./img/n-catergry.png" alt=""></a></li>
                <li><a href="" class="item"><img src="./img/n-find.png" alt=""></a></li>
                <li><a href="" class="item"><img src="./img/n-me.png" alt=""></a></li>
            </ul>
        </div> -->

        <img class="footer_e" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt="" />

        <!-- <div class="box">首页</div> -->
        <div class="footer">
            <div class="item active">
                <div class="iconfont icon-shouye1"></div>
                <div>首页</div>
            </div>
            <div class="item">
                <div class="iconfont icon-icon04"></div>
                <div>分类</div>
            </div>
            <div class="item">
                <div class="iconfont icon-u138"></div>
                <div>发现</div>
            </div>
            <div class="item">
                <div class="iconfont icon-gouwuche"></div>
                <div>购物车</div>
            </div>
            <div class="item">
                <div class="iconfont icon-wode"></div>
                <div>我的</div>
            </div>
        </div>

    </div>
    <script src="./js/swiper.min.js"></script>
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/JD.js"></script>
    <script src="./js/rem.js"></script>
    <script src="./js/home.js"></script>
</body>


</html>